<div class='row'>
    <div class="col-md-12">
        <div class="pull-right">
            <button type="submit" id="submit" data-loading-text="正在验证数据.." class="btn btn-success" data-bind="click:saleRecord.submit" >保存</button>
            <button type="submit" id="submit" data-loading-text="正在验证数据.." class="btn btn-success" data-bind="click:saleRecord.submitAndContinue" >保存并继续添加</button>
            <button type="reset" class="btn btn-default" data-bind="click:saleRecord.reset" >重置表单</button>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="widget wgreen">

            <div class="widget-head">
                <div class="pull-left">添加账单产品</div>
                <div class="widget-icons pull-right">
                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a> 
                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="widget-content">
                <div class="padd">
                    <!-- Form starts.  -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-lg-4 control-label visible-lg">款号</label>
                            <div class="col-lg-8">
                                <input type="text" id="SKUInput" autocomplete="off" class="form-control"  data-bind="value:saleProduct.sku" placeholder="输入产品的唯一编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-4 control-label visible-lg">数量</label>

                            <div class="col-lg-8">
                                <div class="input-group spinner">
                                    <input type="text" id="quantity" class="form-control"
                                           data-bind="value:saleProduct.quantity" value="0">

                                    <div class="input-group-btn-vertical">
                                        <button  class="btn btn-default"><i class="icon-angle-up"></i></button>
                                        <button  class="btn btn-default"><i class="icon-angle-down"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-4 control-label visible-lg">售价</label>
                            <div class="col-lg-8">
                               <input type="text" class="form-control" data-bind="value:saleProduct.price" placeholder="输入实际成交价格">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-4 control-label visible-lg">备注</label>
                            <div class="col-lg-8">
                                <textarea class="form-control" rows="3" data-bind="value:saleProduct.remark" placeholder="输入备注信息"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <!-- Buttons -->
                            <div class="col-lg-offset-4 col-lg-12">
                                <button type="submit" id="submitTo" data-loading-text="正在验证数据.." class="btn btn-success" data-bind="click:function(){saleProduct.submitTo(saleRecord);}">添加此产品到账单</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="widget-foot">
                <!-- Footer goes here -->
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <div class="widget wgreen">

                    <div class="widget-head">
                        <div class="pull-left">客户信息</div>
                        <div class="widget-icons pull-right">
                            <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
                            <a href="#" class="wclose"><i class="icon-remove"></i></a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="widget-content">
                        <div class="padd">
                            <!-- Form starts.  -->
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-lg-4 control-label visible-lg">手机号</label>
                                    <div class="col-lg-8">
                                        <?php echo $this->partial('customer-autocomplete');?>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="widget-foot">
                        <!-- Footer goes here -->
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="widget">

                    <div class="widget-head">
                        <div class="pull-left">此账单包括产品:</div>
                        <div class="widget-icons pull-right">
                            <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
                            <a href="#" class="wclose"><i class="icon-remove"></i></a>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <div class="widget-content">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>款号</th>
                                <th>售价</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody data-bind="foreach:saleRecord.saleProducts,beforeRemove:saleRecord.hide,
                            afterAdd: saleRecord.show " id="recordContent">
                            <tr>
                                <td data-bind="text:sku"></td>
                                <td data-bind="text:quantity"></td>
                                <td data-bind="text:price"></td>
                                <td>
                                    <button class="btn btn-xs btn-success"><i class="icon-ok"></i> </button>
                                    <button class="btn btn-xs btn-warning"><i class="icon-pencil"></i> </button>
                                    <button class="btn btn-xs btn-danger" data-bind="click:function(){saleRecord.removeItem(sku);}"><i class="icon-remove"></i> </button>

                                </td>
                            </tr>
                            <tfoot>
                            <tr>
                                <td colspan="4"><div class="pull-right"><h3 data-bind="text:'总计:'+saleRecord.totalPrice()+'￥'"></h3></div></td>
                            </tr>
                            </tfoot>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<?php $this->headScript()->appendScript("require(['main'],function(){require(['page/sale-record/create-record']);});");?>